<template>
<div v-if="show">
  <!-- 蒙层 -->
  <div class="layoutMask"
    v-on:touchstart.prevent="layoutMaskTouch"
    v-on:touchmove.prevent="layoutMaskTouch"
    v-on:touchend.prevent="layoutMaskTouch"
    v-on:touchcancel.prevent="layoutMaskTouch"
  ></div>
  <div class="popBox dialogCenter">
    <div class="popHead">
      <div class="pop_top" v-on:click="close"></div>
    </div>
    <div class="popBody">
      <div class="popTitle ta_c">
        <h1>{{ title }}</h1>
      </div>
      <div class="popMain">
        <!-- 日期选择器 Date -->
        <div class="timeControlBox" v-if="mode === 'Date'">
          <div class="timeSelect dateSelect d-box">
            <!-- 年 -->
            <div class="b-flex"
              v-on:touchstart.prevent="dateTouchStart($event, 'year')"
              v-on:touchmove.prevent="dateTouchMove($event, 'year')"
              v-on:touchend.prevent="dateTouchEnd($event, 'year')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'year')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -dateModeYearTop + 'px' + ', 0)' }">
                <li v-for="year in years">{{ year }}年</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
            <!-- 月 -->
            <div class="b-flex"
              v-on:touchstart.prevent="dateTouchStart($event, 'month')"
              v-on:touchmove.prevent="dateTouchMove($event, 'month')"
              v-on:touchend.prevent="dateTouchEnd($event, 'month')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'month')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -dateModeMonthTop + 'px' + ', 0)' }">
                <li v-for="month in months">{{ month }}月</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
            <!-- 日 -->
            <div class="b-flex"
              v-on:touchstart.prevent="dateTouchStart($event, 'date')"
              v-on:touchmove.prevent="dateTouchMove($event, 'date')"
              v-on:touchend.prevent="dateTouchEnd($event, 'date')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'date')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -dateModeDateTop + 'px' + ', 0)' }">
                <li v-for="date in dates">{{ date }}日</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
          </div>
        </div>
        <!-- 月份选择器 Month -->
        <div class="timeControlBox" v-else-if="mode === 'Month'">
          <div class="timeSelect d-box">
            <!-- 年 -->
            <div class="b-flex"
              v-on:touchstart.prevent="dateTouchStart($event, 'year')"
              v-on:touchmove.prevent="dateTouchMove($event, 'year')"
              v-on:touchend.prevent="dateTouchEnd($event, 'year')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'year')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -dateModeYearTop + 'px' + ', 0)' }">
                <li v-for="year in years">{{ year }}年</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
            <!-- 月 -->
            <div class="b-flex"
              v-on:touchstart.prevent="dateTouchStart($event, 'month')"
              v-on:touchmove.prevent="dateTouchMove($event, 'month')"
              v-on:touchend.prevent="dateTouchEnd($event, 'month')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'month')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -dateModeMonthTop + 'px' + ', 0)' }">
                <li v-for="month in months">{{ month }}月</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
          </div>
        </div>
        <!-- 时间选择器 Time -->
        <div class="timeControlBox" v-else="mode === 'Time'">
          <div class="timeSelect d-box">
            <!-- 时 -->
            <div class="b-flex hoursBox"
              v-on:touchstart.prevent="dateTouchStart($event, 'hour')"
              v-on:touchmove.prevent="dateTouchMove($event, 'hour')"
              v-on:touchend.prevent="dateTouchEnd($event, 'hour')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'hour')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -timeModeHourTop + 'px' + ', 0)' }">
                <li v-for="hour in hours">{{ hour }}</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime">:</div>
            </div>
            <!-- 分 -->
            <div class="b-flex minuteBox"
              v-on:touchstart.prevent="dateTouchStart($event, 'minute')"
              v-on:touchmove.prevent="dateTouchMove($event, 'minute')"
              v-on:touchend.prevent="dateTouchEnd($event, 'minute')"
              v-on:touchcancel.prevent="dateTouchCancel($event, 'minute')"
            >
              <ul class="timeList ta_c" v-bind:style="{ transform: 'translate3d(0, ' + -timeModeMinuteTop + 'px' + ', 0)' }">
                <li v-for="minute in minutes">{{ minute }}</li>
              </ul>
              <div class="mask"></div>
              <div class="currentTime"></div>
            </div>
          </div>
        </div>
        <div class="btnCon ta_c">
          <div class="btn" v-on:click="confirm">确定</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
const NOW = new Date()
export default {
  name: 'TimeSelect',
  data () {
    return {
      touching: false,
      ROWHEIGHT: 45,   // 选择器行高
      /**
       * 以下为日期选择、月份选择数据
       */
      STARTYEAR: 1970, // 最开始年份为 1970 年

      // 组件年份限定区域为 1970年-2050年
      years: (() => {
        let arr = []
        for (let i = 1970; i <= 2050; i++) {
          arr.push(i)
        }
        return arr
      })(),
      // 日历月份
      months: (() => {
        let arr = []
        for (let i = 1; i <= 12; i++) {
          arr.push(i)
        }
        return arr
      })(),
      dates: [],
      dateModeYearTop: 0,  // 选择日期类型弹窗年份栏的 top 绝对值(也就是偏移量Y轴偏移量translate)
      dateModeMonthTop: 0, // 选择日期类型弹窗月份栏的 top 绝对值(也就是偏移量Y轴偏移量translate)
      dateModeDateTop: 0,  // 选择日期类型弹窗日份栏的 top 绝对值(也就是偏移量Y轴偏移量translate)

      selectedYear: NOW.getFullYear(),   // 选择的年份
      selectedMonth: NOW.getMonth() + 1, // 选择的月份
      selectedDate: NOW.getDate(),       // 选择的日份

      /**
       * 以下为时间选择器所需数据
       */
      hours: (() => {
        let arr = []
        for (let i = 0; i <= 23; i++) {
          if (i < 10) {
            arr.push('0' + i)
          } else {
            arr.push('' + i)
          }
        }
        // return arr
        return [ ...arr, ...arr, ...arr ]
      })(),
      minutes: (() => {
        let arr = []
        for (let i = 0; i <= 59; i++) {
          if (i < 10) {
            arr.push('0' + i)
          } else {
            arr.push('' + i)
          }
        }
        // return arr
        return [ ...arr, ...arr, ...arr ]
      })(),
      timeModeHourTop: 0,
      timeModeMinuteTop: 0,
      selectedHour: NOW.getHours() < 10 ? '0' + NOW.getHours() : '' + NOW.getHours(),
      selectedMinute: NOW.getMinutes() < 10 ? '0' + NOW.getMinutes() : '' + NOW.getMinutes(),

      /**
       * 组件滑动的辅助数据 S
       */
      startX: 0,
      startY: 0,
      topBeforeSlide: 0,   // 滑动前的 Top 值
      startOfSlide: 23,    // Y 轴超过多少时为有效滑动
      outOfSlide: 300      // X 轴超过多少为无效滑动
      /**
       * 组件滑动的辅助数据 E
       */
    }
  },
  props: {
    // 是否选择组件
    show: {
      type: Boolean,
      default: false
    },
    /**
     * 选择器类型
     * - 日期选择器(Date)
     * - 月份选择(Month)
     * - 时间选择(Time)
     * - 默认是日期选择(Date)
     **/
    mode: {
      type: String,
      default: 'Date'
    },
    // 已有默认日期、月份或时间
    selected: {
      type: String,
      default: ''
    },
    // 时间限定条件开始时间(即组件选择时间不得早于该时间点)
    starttime: {
      type: String,
      default: ''
    },
    // 时间限定条件结束时间(即组件选择时间不得晚于该时间点)
    endtime: {
      type: String,
      default: ''
    },
    selectIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    close () {
      console.log('-- close in --')
      this.$emit('close', false)
    },
    confirm () {
      console.log('-- confirm in --')
      let selectedMonth = this.selectedMonth < 10 ? '0' + this.selectedMonth : '' + this.selectedMonth
      let selectedDate = this.selectedDate < 10 ? '0' + this.selectedDate : '' + this.selectedDate

      this.$emit('close', false)
      switch (this.mode) {
        case 'Date':
          this.$emit('confirm', this.selectedYear + '-' + selectedMonth + '-' + selectedDate, this.selectIndex)
          break
        case 'Month':
          this.$emit('confirm', this.selectedYear + '-' + selectedMonth, this.selectIndex)
          break
        case 'Time':
          this.$emit('confirm', this.selectedHour + ':' + this.selectedMinute, this.selectIndex)
          break
        default:
          this.$emit('confirm', '', this.selectIndex)
      }
    },
    dateTouchStart (event, handler) {
      if (this.touching) {
        return
      } else {
        this.touching = true
      }
      console.log('----start----')
      let startX = event.touches[0].pageX
      let startY = event.touches[0].pageY
      this.startX = startX
      this.startY = startY

      if (handler === 'year') {
        this.topBeforeSlide = this.dateModeYearTop
      } else if (handler === 'month') {
        this.topBeforeSlide = this.dateModeMonthTop
      } else if (handler === 'date') {
        this.topBeforeSlide = this.dateModeDateTop
      } else if (handler === 'hour') {
        this.topBeforeSlide = this.timeModeHourTop
      } else if (handler === 'minute') {
        this.topBeforeSlide = this.timeModeMinuteTop
      }
    },
    dateTouchMove (event, handler) {
      if (!this.touching) {
        return
      }
      console.log('----move----')
      let moveY = event.touches[0].pageY
      let distY = moveY - this.startY

      if (handler === 'year') { // 滑动年
        if (this.topBeforeSlide - distY > (this.years.length - 3) * this.ROWHEIGHT) {
          this.dateModeYearTop = (this.years.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeYearTop = -2 * this.ROWHEIGHT
        } else {
          this.dateModeYearTop = this.topBeforeSlide - distY
        }
      } else if (handler === 'month') { // 滑动月
        if (this.topBeforeSlide - distY > (this.months.length - 3) * this.ROWHEIGHT) {
          this.dateModeMonthTop = (this.months.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeMonthTop = -2 * this.ROWHEIGHT
        } else {
          this.dateModeMonthTop = this.topBeforeSlide - distY
        }
      } else if (handler === 'date') { // 滑动日
        if (this.topBeforeSlide - distY > (this.dates.length - 3) * this.ROWHEIGHT) {
          this.dateModeDateTop = (this.dates.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeDateTop = -2 * this.ROWHEIGHT
        } else {
          this.dateModeDateTop = this.topBeforeSlide - distY
        }
      } else if (handler === 'hour') { // 滑动时
        if (this.topBeforeSlide - distY > (this.hours.length - 3) * this.ROWHEIGHT) {
          this.timeModeHourTop = (this.hours.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.timeModeHourTop = -2 * this.ROWHEIGHT
        } else {
          this.timeModeHourTop = this.topBeforeSlide - distY
        }
      } else if (handler === 'minute') { // 滑动分
        if (this.topBeforeSlide - distY > (this.minutes.length - 3) * this.ROWHEIGHT) {
          this.timeModeMinuteTop = (this.minutes.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.timeModeMinuteTop = -2 * this.ROWHEIGHT
        } else {
          this.timeModeMinuteTop = this.topBeforeSlide - distY
        }
      }
    },
    dateTouchEnd (event, handler) {
      if (this.touching) {
        this.touching = false
      } else {
        return
      }
      console.log('----end----')
      let moveX = event.changedTouches[0].pageX
      let moveY = event.changedTouches[0].pageY
      let distX = moveX - this.startX
      let distY = moveY - this.startY

      // 无效滑动判断
      if (Math.abs(distX) > this.outOfSlide || Math.abs(distY) < this.startOfSlide) {
        console.log('--无效滑动---')
        if (handler === 'year') {
          this.dateModeYearTop = this.topBeforeSlide
        } else if (handler === 'month') {
          this.dateModeMonthTop = this.topBeforeSlide
        } else if (handler === 'date') {
          this.dateModeDateTop = this.topBeforeSlide
        } else if (handler === 'hour') {
          this.timeModeHourTop = this.topBeforeSlide
        } else if (handler === 'minute') {
          this.timeModeMinuteTop = this.topBeforeSlide
        }
        this.resetTempData()
        return
      }

      if (handler === 'year') {
        if (this.topBeforeSlide - distY > (this.years.length - 3) * this.ROWHEIGHT) {
          this.dateModeYearTop = (this.years.length - 3) * this.ROWHEIGHT  // 滑动超出最底部的时，该栏滚动到最底部
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeYearTop = -2 * this.ROWHEIGHT                       // 滑动超出最顶部时，该栏滚动至最顶部
        } else {
          this.dateModeYearTop = this.topBeforeSlide - Math.round(distY / this.ROWHEIGHT) * this.ROWHEIGHT
        }
      } else if (handler === 'month') {
        if (this.topBeforeSlide - distY > (this.months.length - 3) * this.ROWHEIGHT) {
          this.dateModeMonthTop = (this.months.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeMonthTop = -2 * this.ROWHEIGHT
        } else {
          this.dateModeMonthTop = this.topBeforeSlide - Math.round(distY / this.ROWHEIGHT) * this.ROWHEIGHT
        }
      } else if (handler === 'date') {
        if (this.topBeforeSlide - distY > (this.dates.length - 3) * this.ROWHEIGHT) {
          this.dateModeDateTop = (this.dates.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.dateModeDateTop = -2 * this.ROWHEIGHT
        } else {
          this.dateModeDateTop = this.topBeforeSlide - Math.round(distY / this.ROWHEIGHT) * this.ROWHEIGHT
        }
      } else if (handler === 'hour') {
        let starttime = this.starttime
        let endtime = this.endtime
        let startTimeObj = {}
        let endTimeObj = {}
        // 开始时间
        if (starttime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(starttime)) {
          startTimeObj = {
            hour: Number(starttime.split(':')[0]),
            minute: Number(starttime.split(':')[1])
          }
        }
        // 结束时间
        if (endtime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(endtime)) {
          endTimeObj = {
            hour: Number(endtime.split(':')[0]),
            minute: Number(endtime.split(':')[1])
          }
        }

        if (this.topBeforeSlide - distY > (this.hours.length - 3) * this.ROWHEIGHT) { // 组件滑至最底部(数值最大如23时) 向上滑动
          this.timeModeHourTop = (this.hours.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {               // 组件滑至最顶部(数值最小如0时) 向下滑动
          this.timeModeHourTop = -2 * this.ROWHEIGHT
        } else {
          if (this.topBeforeSlide - distY > (this.hours.length / 3 * 2 - 3) * this.ROWHEIGHT) {
            /**
             * 滑动超过23时做循环处理
             */
            let _slideDistSize = Math.round((this.topBeforeSlide - distY - (this.hours.length / 3 * 2 - 3) * this.ROWHEIGHT) / this.ROWHEIGHT)
            if (_slideDistSize > 0) {
              this.timeModeHourTop = (_slideDistSize + 24 - 3) * this.ROWHEIGHT
            } else {
              this.timeModeHourTop = (this.hours.length / 3 * 2 - 3) * this.ROWHEIGHT
            }
          } else if (this.topBeforeSlide - distY < (-2 + 24) * this.ROWHEIGHT) {
            /**
             * 滑动超过00时做循环处理
             */
            let _slideDistSize = Math.round(((-2 + 24) * this.ROWHEIGHT - (this.topBeforeSlide - distY)) / this.ROWHEIGHT)
            if (_slideDistSize > 0) {
              this.timeModeHourTop = (this.hours.length / 3 * 2 - 2 - _slideDistSize) * this.ROWHEIGHT
            } else {
              this.timeModeHourTop = (-2 + 24) * this.ROWHEIGHT
            }
          } else {
            this.timeModeHourTop = this.topBeforeSlide - Math.round(distY / this.ROWHEIGHT) * this.ROWHEIGHT
          }

          if (startTimeObj.hour && this.timeModeHourTop <= (startTimeObj.hour - 2) * this.ROWHEIGHT) { // 开始
            this.timeModeHourTop = (startTimeObj.hour - 2) * this.ROWHEIGHT
            this.timeModeMinuteTop = (startTimeObj.minute - 2) * this.ROWHEIGHT
          }
          if (endTimeObj.hour && this.timeModeHourTop >= (endTimeObj.hour - 2) * this.ROWHEIGHT) {     // 结束
            this.timeModeHourTop = (endTimeObj.hour - 2) * this.ROWHEIGHT
            this.timeModeMinuteTop = (endTimeObj.minute - 2) * this.ROWHEIGHT
          }
        }
      } else if (handler === 'minute') {
        let starttime = this.starttime
        let endtime = this.endtime
        let startTimeObj = {}
        let endTimeObj = {}
        // 开始时间
        if (starttime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(starttime)) {
          startTimeObj = {
            hour: Number(starttime.split(':')[0]),
            minute: Number(starttime.split(':')[1])
          }
        }
        // 结束时间
        if (endtime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(endtime)) {
          endTimeObj = {
            hour: Number(endtime.split(':')[0]),
            minute: Number(endtime.split(':')[1])
          }
        }
        if (this.topBeforeSlide - distY > (this.minutes.length - 3) * this.ROWHEIGHT) {
          this.timeModeMinuteTop = (this.minutes.length - 3) * this.ROWHEIGHT
        } else if (this.topBeforeSlide - distY < -2 * this.ROWHEIGHT) {
          this.timeModeMinuteTop = -2 * this.ROWHEIGHT
        } else {
          if (this.topBeforeSlide - distY > (this.minutes.length / 3 * 2 - 3) * this.ROWHEIGHT) {
            /**
             * 滑动超过59时做循环处理
             */
            let _slideDistSize = Math.round((this.topBeforeSlide - distY - (this.minutes.length / 3 * 2 - 3) * this.ROWHEIGHT) / this.ROWHEIGHT)
            if (_slideDistSize > 0) {
              this.timeModeMinuteTop = (_slideDistSize + 60 - 3) * this.ROWHEIGHT
            } else {
              this.timeModeMinuteTop = (this.minutes.length / 3 * 2 - 3) * this.ROWHEIGHT
            }
          } else if (this.topBeforeSlide - distY < (-2 + 60) * this.ROWHEIGHT) {
            /**
             * 滑动超过00时做循环处理
             */
            let _slideDistSize = Math.round(((-2 + 60) * this.ROWHEIGHT - (this.topBeforeSlide - distY)) / this.ROWHEIGHT)
            if (_slideDistSize > 0) {
              this.timeModeMinuteTop = (this.minutes.length / 3 * 2 - 2 - _slideDistSize) * this.ROWHEIGHT
            } else {
              this.timeModeMinuteTop = (-2 + 60) * this.ROWHEIGHT
            }
          } else {
            this.timeModeMinuteTop = this.topBeforeSlide - Math.round(distY / this.ROWHEIGHT) * this.ROWHEIGHT
          }

          // 开始
          if (startTimeObj.hour && this.timeModeHourTop === (startTimeObj.hour - 2) * this.ROWHEIGHT) {
            if (startTimeObj.minute && this.timeModeMinuteTop < (startTimeObj.minute - 2) * this.ROWHEIGHT) {
              this.timeModeMinuteTop = (startTimeObj.minute - 2) * this.ROWHEIGHT
            }
          }

          // 结束
          if (endTimeObj.hour && this.timeModeHourTop === (endTimeObj.hour - 2) * this.ROWHEIGHT) {
            if (endTimeObj.minute && this.timeModeMinuteTop > (endTimeObj.minute - 2) * this.ROWHEIGHT) {
              this.timeModeMinuteTop = (endTimeObj.minute - 2) * this.ROWHEIGHT
            }
          }
        }
      }
      this.resetTempData()
    },
    dateTouchCancel (event, handler) {
      this.touching = false
      if (handler === 'year') {
        this.dateModeYearTop = this.topBeforeSlide
      } else if (handler === 'month') {
        this.dateModeMonthTop = this.topBeforeSlide
      } else if (handler === 'date') {
        this.dateModeDateTop = this.topBeforeSlide
      } else if (handler === 'hour') {
        this.timeModeHourTop = this.topBeforeSlide
      } else if (handler === 'minute') {
        this.timeModeMinuteTop = this.topBeforeSlide
      }
      this.resetTempData()
    },
    resetTempData () {
      this.startX = 0
      this.startY = 0
      this.topBeforeSlide = 0 // 滑动前的 Top 值
    },
    /**
     * @param  {Object}  selectedDateObj  当前时间对象
     */
    initDefaultData (dateObj) {
      let _dateObj = dateObj || {}
      let now = new Date()
      let currentYear = _dateObj.year ? _dateObj.year : now.getFullYear()
      let currentMonth = _dateObj.month ? _dateObj.month : now.getMonth() + 1
      let currentDate = _dateObj.date ? _dateObj.date : now.getDate()
      let currentMonthDateNum = new Date(currentYear, currentMonth, 0).getDate() // 当前月天数
      let dates = []
      let currentHour = _dateObj.hour || _dateObj.hour === 0 ? _dateObj.hour : now.getHours()
      let currentMinute = _dateObj.minute || _dateObj.minute === 0 ? _dateObj.minute : now.getMinutes()

      this.selectedYear = currentYear
      this.selectedMonth = currentMonth
      this.selectedDate = currentDate
      this.selectedHour = currentHour < 10 ? '0' + currentHour : '' + currentHour
      this.selectedMinute = currentMinute < 10 ? '0' + currentMinute : '' + currentMinute

      // 因为选中年份要居中显示，所以要减去2
      this.dateModeYearTop = (currentYear - this.STARTYEAR - 2) * this.ROWHEIGHT // 初始设置年偏移量值
      this.dateModeMonthTop = (currentMonth - 1 - 2) * this.ROWHEIGHT            // 初始设置月偏移量值

      for (let i = 1; i <= currentMonthDateNum; i++) {
        dates.push(i)
      }
      this.dates = dates
      this.dateModeDateTop = (currentDate - 1 - 2) * this.ROWHEIGHT                           // 初始设置日偏移量值
      this.timeModeHourTop = (currentHour - 0 - 2) * this.ROWHEIGHT + 24 * this.ROWHEIGHT     // 初始设置时偏移量值
      this.timeModeMinuteTop = (currentMinute - 0 - 2) * this.ROWHEIGHT + 60 * this.ROWHEIGHT // 初始设置分偏移量值

      // 默认时间限定条件判断，即默认时间要在开始时间以及结束时间区间内
      if (this.mode === 'Time') {
        let starttime = this.starttime
        let endtime = this.endtime
        let startTimeObj = {}
        let endTimeObj = {}
        // 开始时间
        if (starttime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(starttime)) {
          startTimeObj = {
            hour: Number(starttime.split(':')[0]),
            minute: Number(starttime.split(':')[1])
          }
        }
        // 结束时间
        if (endtime && /^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(endtime)) {
          endTimeObj = {
            hour: Number(endtime.split(':')[0]),
            minute: Number(endtime.split(':')[1])
          }
        }
        if (!startTimeObj.hour || !endTimeObj.hour) return

        if (currentHour > startTimeObj.hour && currentHour < endTimeObj.hour) {
          // 在开始时间或结束时间区间内
          return
        } else if (currentHour === startTimeObj.hour) {
          if (currentMinute < startTimeObj.minute) {
            this.timeModeMinuteTop = (startTimeObj.minute - 2) * this.ROWHEIGHT + 60 * this.ROWHEIGHT
          }
        } else if (currentHour === endTimeObj.hour) {
          if (currentMinute > endTimeObj.minute) {
            this.timeModeMinuteTop = (endTimeObj.minute - 2) * this.ROWHEIGHT + 60 * this.ROWHEIGHT
          }
        } else if (currentHour < startTimeObj.hour) {
          this.timeModeHourTop = (startTimeObj.hour - 2) * this.ROWHEIGHT + 24 * this.ROWHEIGHT
          this.timeModeMinuteTop = (startTimeObj.minute - 2) * this.ROWHEIGHT + 24 * this.ROWHEIGHT
        } else if (currentHour > endTimeObj.hour) {
          this.timeModeHourTop = (endTimeObj.hour - 2) * this.ROWHEIGHT + 24 * this.ROWHEIGHT
          this.timeModeMinuteTop = (endTimeObj.minute - 2) * this.ROWHEIGHT + 60 * this.ROWHEIGHT
        }
      }
    },
    layoutMaskTouch () {
    }
  },
  computed: {
    title () {
      let title = ''
      let mode = this.mode
      switch (mode) {
        case 'Date':
          title = '选择日期'
          break
        case 'Month':
          title = '选择年月'
          break
        case 'Time':
          title = '设置时间'
          break
        default:
          title = '选择日期'
      }
      return title
    }
  },
  watch: {
    // 监听年偏移量变化
    dateModeYearTop () {
      let dateModeYearTop = this.dateModeYearTop
      let selectedYear = Math.round((2 * this.ROWHEIGHT + dateModeYearTop) / this.ROWHEIGHT) + this.STARTYEAR
      this.selectedYear = selectedYear
      let selectedMonthDateNum = new Date(selectedYear, this.selectedMonth, 0).getDate()
      let dates = []
      for (let i = 1; i <= selectedMonthDateNum; ++i) {
        dates.push(i)
      }
      this.dates = dates
      if (this.selectedDate > selectedMonthDateNum) {
        this.selectedDate = selectedMonthDateNum
        this.dateModeDateTop = (selectedMonthDateNum - 1 - 2) * this.ROWHEIGHT
      }
    },
    // 监听月偏移量变化
    dateModeMonthTop () {
      let dateModeMonthTop = this.dateModeMonthTop
      let selectedMonth = Math.round((2 * this.ROWHEIGHT + dateModeMonthTop) / this.ROWHEIGHT) + 1
      this.selectedMonth = selectedMonth
      let selectedMonthDateNum = new Date(this.selectedYear, selectedMonth, 0).getDate()
      let dates = []
      for (let i = 1; i <= selectedMonthDateNum; ++i) {
        dates.push(i)
      }
      this.dates = dates
      if (this.selectedDate > selectedMonthDateNum) {
        this.selectedDate = selectedMonthDateNum
        this.dateModeDateTop = (selectedMonthDateNum - 1 - 2) * this.ROWHEIGHT
      }
    },
    // 监听日偏移量变化
    dateModeDateTop () {
      let dateModeDateTop = this.dateModeDateTop
      let selectedDate = Math.round((2 * this.ROWHEIGHT + dateModeDateTop) / this.ROWHEIGHT) + 1
      this.selectedDate = selectedDate
    },
    // 监听时偏移量
    timeModeHourTop () {
      let timeModeHourTop = this.timeModeHourTop
      let selectedHour = Math.round(2 * this.ROWHEIGHT + timeModeHourTop - 24 * this.ROWHEIGHT) / this.ROWHEIGHT
      this.selectedHour = selectedHour < 10 ? '0' + selectedHour : '' + selectedHour
    },
    // 监听分偏移量
    timeModeMinuteTop () {
      let timeModeMinuteTop = this.timeModeMinuteTop
      let selectedMinute = Math.round(2 * this.ROWHEIGHT + timeModeMinuteTop - 60 * this.ROWHEIGHT) / this.ROWHEIGHT
      this.selectedMinute = selectedMinute < 10 ? '0' + selectedMinute : '' + selectedMinute
    },
    show (newShow) {
      if (newShow) {
        let mode = this.mode
        let selected = this.selected

        if (selected) { // 如果父组件传了一个日期或者时间进来，优先显示这个日期或者时间
          if (mode === 'Date') {
            if (/^[1-2]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/.test(selected)) {
              let selectedSplited = selected.split('-')
              let dateObj = {
                year: Number(selectedSplited[0]),
                month: Number(selectedSplited[1]),
                date: Number(selectedSplited[2])
              }

              this.initDefaultData(dateObj)
            } else {
              this.initDefaultData()
              console.warn('年月日格式不合法，应为yyyy-mm-dd')
            }
          } else if (mode === 'Month') {
            if (/^[1-2]\d{3}-(0[1-9]|1[0-2])$/.test(selected)) {
              let selectedSplited = selected.split('-')
              let dateObj = {
                year: Number(selectedSplited[0]),
                month: Number(selectedSplited[1])
              }

              this.initDefaultData(dateObj)
            } else {
              this.initDefaultData()
              console.warn('年月格式不合法，应为yyyy-mm')
            }
          } else if (mode === 'Time') {
            if (/^(20|21|22|23|[0-1]\d):[0-5]\d$/.test(selected)) {
              let selectedSplited = selected.split(':')
              let dateObj = {
                hour: Number(selectedSplited[0]),
                minute: Number(selectedSplited[1])
              }

              this.initDefaultData(dateObj)
            } else {
              this.initDefaultData()
              console.warn('时间格式不合法，应为hh:mm')
            }
          }
        } else { // 否则，默认取今天的日期或时间
          this.initDefaultData()
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.timeSelect {
  height: 229px;
}
</style>
